<template>
  <div class="app-container">
    <y-table ref="gridRef" v-bind="listOptions" @toolbar-button-click="toolbarButtonClickEvent">

      <template #paramval="{ row }">
        <!--                        selecttext-->
        <el-select style="width:100%" v-if="row.paramType === 'selecttext'" v-model="row.paramValue" clearable
          size="mini" placeholder="请选择参数" @change="paramChange('select', $event, row)">
          <el-option v-for="item in row.paramMemo.split(',')" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>

        <!--                        text-->
        <el-input v-model="row.paramValue" v-if="row.paramType === 'text'" size="mini" clearable placeholder="请输入参数"
          @change="paramChange('text', $event, row)"></el-input>
        <!--                        switch-->
        <vxe-switch v-if="row.paramType === 'boolean'" v-model="row.paramValue" size="mini"
          @change="paramChange('switch', $event.value, row)"></vxe-switch>

        <!--                        number -->
        <el-input v-model="row.paramValue" v-if="row.paramType === 'number'" size="mini" clearable type="number"
          placeholder="请输入参数" @change="paramChange('number', $event, row)"></el-input>

        <!--                        upload-->
        <z-upload v-if="row.paramType === 'upload'" module="WebFile" file-id=''
          @success="({ path }) => paramChange('upload', path, row)">
        </z-upload>
        <el-input style="width:100%" v-if="row.paramType === 'upload'" v-model="row.paramValue" size="mini" clearable
          placeholder="请输入参数" readonly></el-input>
      </template>
    </y-table>
  </div>
</template>

<script>

import {
  getList, update
} from '@/api/sys/config' // 接口

import listMixin from '@/mixins/listMixin'
import zupload from '@/components/ZUpload'

export default {
  mixins: [listMixin],
  components: {
    zupload
  },
  data() {
    return {
      // 表格配置
      listOptions: {
        // 默认查询数据
        defaultQueryData: {
          // form
          form: {},
          // 分页
          page: {
            pageSize: 50
          },
          // 其他查询参数
          params: {}
        },
        // 获取数据方法
        dataMethod: getList,
        // 表格配置
        tableOptions: {
          rowConfig: {
            keyField: 'tid'
          },
          // 表格列
          columns: [
            { type: 'seq', width: 48, align: 'center', fixed: 'left' },
            { field: "paramType", width: 120, title: "参数类型" },
            { field: "paramName", width: 250, title: "参数名称" },
            { field: "paramValue", mWidth: 250, title: "参数值", slots: { default: "paramval" } },
            { field: "paramSortId", width: 180, title: "参数类别", dictCode: 'frame_config_type' },
            { field: "paramMemo", mWidth: 250, title: "说明" },
            { field: "modifyTime", width: 180, title: "最后更新" },
          ]
        },
        // 查询配置
        formOptions: {
          items: [
            {
              field: 'paramSortId', title: '参数类别',
              itemRender: {
                name: 'ZSelect',
                props: {
                  dictCode: 'frame_config_type'
                }
              }
            },
            {
              field: 'keywords', title: '参数名称',
              itemRender: { name: 'VxeInput', props: { maxlength: 50 } },
            }
          ]
        }
      },
    }
  },
  /**
   * 组件挂载时异步执行的方法
   */
  async mounted() {
    // 动态设置查询参数
    // 此处的目的是根据某些条件或逻辑动态地设置组件的查询参数，以便在加载数据前做好准备
    await this.setFormQuery()

    // 加载数据
    // 通过refs引用调用loadData方法来加载数据
    this.$refs.gridRef.loadData()
  },
  methods: {
    /**
     * 工具栏按钮点击事件处理函数
     * @param {Object} event - 事件对象，包含按钮代码
     * 该函数根据点击的工具栏按钮代码，执行不同的操作
     */
    toolbarButtonClickEvent({ code }) {
      switch (code) {
        case 'add':
          // 执行添加操作，打开表单对话框
          this.openFormDialog({ row: null, refName: 'dialogFormRef' })
          break
        default:
          break
      }
    },
    paramChange(type, val, row) {
      let newVal = val;
      if (type === 'select') {
        newVal = row.paramMemo.split(',').find(d => d == val);
      }
      if (type === 'upload') {
        row.paramValue = newVal;
      }
      this.$confirm('是否确认修改参数值' + row.paramName + '的值为【' + newVal + '】？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        update(row).then((upres) => {
          if (upres.status) {
            this.$message.success('参数值修改成功！')
            this.$refs.gridRef.loadData()
          }
        })
      }).catch(() => {
        this.$refs.gridRef.loadData()
      })
    },


    async setFormQuery() {
      // this.listOptions.defaultQueryData.form.pageSize = 50
      // this.listOptions.defaultQueryData.form.pageNum = 1
      // this.dictCampusList = await this.getDictItems("campus_list");
      // this.dictCollegeList = await this.getDictItems("college_list");
    },
    getRadioRow() {
      return this.$refs.gridRef.$refs.gridRef.getRadioRecord()
    },
    getCheckboxRow() {
      return this.$refs.gridRef.$refs.gridRef.getCheckboxRecords()
    }
  }
}
</script>

<style lang="scss" scoped></style>
